<style lang="scss">
  .edui-default .edui-toolbar{ line-height: initial; }
</style>

<template>
  <VueUEditor :ueditorPath="ueditorPath" :ueditorConfig="ueditorConfig" @ready="ueditorReady"></VueUEditor>
</template>
<script>
import VueUEditor from 'vue-ueditor';
export default {
  name: "UEditor",
  data(){
    return{
      ueditorPath : 'https://da.dierqudao.com/ueditor/',
      ueditorConfig : {
        'UEDITOR_HOME_URL' :  'https://da.dierqudao.com/ueditor/',
        'serverUrl':   "https://da.dierqudao.com/ueditor-upload-pic",
        'toolbars': [[
          'fullscreen', 'source', '|', 'undo', 'redo', '|',
          'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
          'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
          'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
          'directionalityltr', 'directionalityrtl', 'indent', '|',
          'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
          'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
          'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
          'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
          'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
          'preview', 'searchreplace', 'drafts'
        ]]},
      ue : false,
      enter : false,
//      serverUrl: "http://duoyunzhushou.me/core/ueditor/index?i=1"
    }
  },
  props: {
    ueditorContent: String,
  },
  watch: {
    ueditorContent : function(newval,oldval){
      console.log(newval);
      if(!this.enter && this.ue){
        this.ue.setContent(newval);
      }
    }
  },
  methods: {
    ueditorReady(ue){
      const _this = this;
      this .ue = ue;
      ue.setContent(this.ueditorContent)
      ue.addListener('contentChange', ()=>{
        _this.enter = true;
        _this.$emit('update:ueditorContent', ue.getContent())
      })
    }
  },
  components: {
    VueUEditor,
  }
}
</script>

